<template>
	<view class="classification-view">
		<view class="search-view">
			<u-search :placeholder="$t('search.searchPla')" @click="clickSearch" v-model="serachValue" :show-action="false" :disabled="true" @change="serachChange" height="37">
			</u-search>
		</view>

		<view class="main">
			<view class="sidebar">
				<view class="sidebar-item" v-for="(item, index) in categoryData" @click="current = index"
					:class="{'click-sty': current == index}" v-if="categoryData.length > 0">
					{{ $t("language") == "zh"?item.brandName:item.brandEngName }}
				</view>
			</view>
			<view class="pal"></view>
			<view class="content" :style="{height: screenHeight + 'px'}">
				<template v-if="categoryData.length > 0">
					<recommClassification v-if="current == 0" :items="categoryData[0].children"></recommClassification>
					
					<view class="list" v-for="(item, index) in categoryData[current].children" :key="index"
						v-if="current != 0 && current != 1">
						<SubClassification :main="true" :className="$t('language') == 'zh'?item.brandName:item.brandEngName" :subChildren="item.children">
						</SubClassification>
					</view>
					
					<BrandClassification :main="true" :items="brandArr" :indexList="indexList" :hot="categoryData[1].children"
						v-if="current == 1"></BrandClassification> 
				</template>
			</view>
		</view>
	</view>
</template>

<script>
	import SubClassification from "../../components/SubClassification/SubClassification"
	import BrandClassification from "../../components/BrandClassification/BrandClassification"
	import recommClassification from "@/components/recommClassification/recommClassification.vue"
	import {
		getCategory,
		getSwiper,
		getNewsList
	} from "../../common/api.js"

	export default {
		data() {
			return {
				serachValue: "",
				current: 0,
				categoryData: [{
					brandName: this.$t('classify.recomm'),
					brandEngName: "Recommend",
					children: {
						good: {
							name: this.$t('classify.news'),
							children: []
						},
						hotCategory: {
							name: this.$t('classify.hotCategory'),
							children: []
						}
					}
				}],
				brandArr: [],
				indexList: [],
			}
		},
		computed: {},
		methods: {
			clickSearch() {
				uni.navigateTo({
					url: '/pages/search/search',
				});
			},
			fillScreen() {
				if(this.categoryData.length <= 1) {
					this.screenHeight = uni.getSystemInfoSync().windowHeight;
				}
				// console.log(this.screenHeight);
			},
			serachChange() {

			},
			scrolltolower() {
				console.log("到达底部");
			},
			initData() {
				console.log("请求数据");
				getCategory()
					.then((res) => {
						console.log(res);
						this.modifData(res[0].children);
						this.categoryData = [...this.categoryData, ...res];
						res.forEach((item, index) => {
							if(index > 0) {
								if (item.children) {
									item.children.forEach((subItem) => {
										if (Array.isArray(subItem.children)) {
											this.categoryData[0].children.hotCategory.children = [...this.categoryData[0].children.hotCategory.children, ...subItem.children]
										}
									});
								}
								// this.categoryData[0].children.hotCategory.children
							}
						});
					})
			},
			modifData(arr) {
				// 修改数据品牌右侧显示内容 
				const newArr = arr.map((item) => {
					item["newBrandName"] = item.brandEngName + "-" + item.brandName
					return item;
				})
				const tempArr = [];
				newArr.sort(function(s1, s2) {
					let x1 = s1.newBrandName.toUpperCase();
					let x2 = s2.newBrandName.toUpperCase();
					if (x1 < x2) {
						return -1;
					}
					if (x1 > x2) {
						return 1;
					}
					return 0;
				});
				// console.log(newArr);
				newArr.forEach((subItem, index) => {
					let isAdd = false;
					tempArr.forEach((item, index) => {
						if (item[0].newBrandName[0].toUpperCase() === subItem.newBrandName[0]
							.toUpperCase()) {
							isAdd = true;
							tempArr[index].push(subItem);
						}
					})
					if (!isAdd && tempArr.length > 0) {
						tempArr.push([subItem])
					}
					if (tempArr.length <= 0) {
						tempArr.push([subItem])
					}
				})
				// console.log(tempArr);
				this.brandArr = tempArr;
				tempArr.forEach((item) => {
					this.indexList.push(item[0].newBrandName[0].toUpperCase());
				})
			},
			async getGood() {
				const res = await getNewsList({
					pageSize: 3
				});
				if(res.code == 200) {
					this.categoryData[0].children.good.children = res.rows;
				}
				console.log(res);
			}
		},
		onLoad() {
			this.initData();
			this.fillScreen();
			this.getGood();
		},
		components: {
			SubClassification,
			BrandClassification
		},
		onReady() {
			uni.setNavigationBarTitle({ title: this.$t("classify.title")});
		}
	}
</script>
 

<style>
	page {
		background-color: #FBFBFB;
	}
</style>
<style lang="scss" scoped>
	page,
	.classification-view {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		background-color: #FBFBFB;
	}

	// 搜索框
	.search-view {
		padding: 14rpx 24rpx;
		background-color: #fff;
		box-sizing: border-box;
		position: fixed;
		left: 0;
		/* #ifdef APP */
		top: 0;
		/* #endif */
		/* #ifdef H5 */
		top: 82rpx;
		/* #endif */
		width: 100%;
		z-index: 9;
	}

	.click-sty {
		background-color: #000;
		color: #fff;
	}

	// .u-list {
	// 	padding-bottom: 138rpx;
	// }

	.list:last-child {
		padding-bottom: 138rpx;
	}

	// .u-list-item:last-child {
	// 	padding-bottom: 138rpx;
	// }

	.pal {
		width: 199rpx;
		height: 100%;
	}

	.main {
		width: 100%;
		height: 100%;
		display: flex;
		margin-bottom: 140rpx;
		// position: absolute;
		// top: 88rpx;
		// left: 0;

		// 侧边栏
		.sidebar {
			height: 100%;
			width: 200rpx;
			background-color: #fff;
			flex-shrink: 0;
			padding-top: 16rpx;
			box-sizing: border-box;
			position: fixed;
			/* #ifdef APP */
			top: 91rpx;
			/* #endif */
			/* #ifdef H5 */
			top: 176rpx;
			/* #endif */
			
			left: 0;

			.sidebar-item {
				width: 100%;
				height: 80rpx;
				border-radius: 0rpx 8rpx 8rpx 0rpx;
				text-align: center;
				line-height: 80rpx;
				font-size: 28rpx;
			}
		}

		.content {
			margin-top: 86rpx;
			margin-top: 106rpx;
			width: 0;
			// padding: 0 24rpx;
			padding-left: 24rpx;
			padding-top: 16rpx;
			list-style: none;
			box-sizing: border-box;
			flex: 1;
			height: 100%;
			// margin-left: 200rpx;
			// overflow: hidden;
			background-color: #FBFBFB;
		}
	}
</style>
